//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Slider from 'react-native-slider'
import PropTypes from 'prop-types'

class CusSlider extends React.PureComponent {

    static propTypes = {
        ...Slider.propTypes,
        value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
        maximumValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
    };

    static defaultProps = {
        ...Slider.defaultProps,
        minimumTrackTintColor: '#357ede',
        maximumTrackTintColor: '#fff',
    }

    _onSlidingStart = (params) => {
        // console.log('_onSlidingStart', params)
        const { onSlidingStart } = this.props
        onSlidingStart && onSlidingStart(params)
    };

    _onSlidingComplete = (params) => {
        // console.log('_onSlidingComplete', params)
        const { onSlidingComplete } = this.props
        onSlidingComplete && onSlidingComplete(params)

    };

    _onValueChange = (params) => {
        // console.log('_onValueChange', params)
        const { onValueChange } = this.props
        onValueChange && onValueChange(params)
    };

    render() {
        const { onValueChange, onSlidingStart, onSlidingComplete, value, maximumValue, ...others } = this.props
        let newValue
        if (value > maximumValue) {
            newValue = 0
        } else {
            newValue = value
        }
        return (
            <Slider
                {...others}
                value={parseInt(newValue)}
                maximumValue={parseInt(maximumValue)}
                thumbStyle={styles.thumbStyle}
                trackStyle={styles.trackStyle}
                animationConfig={{ useNativeDriver: true }}
                onValueChange={this._onValueChange}
                onSlidingStart={this._onSlidingStart}
                onSlidingComplete={this._onSlidingComplete}
            />
        );
    }
}

// define your styles
const styles = StyleSheet.create({
    thumbStyle: {
        backgroundColor: '#fff',
        width: 10,
        height: 10
    },
    trackStyle: {
        height: 3,

    }
});

//make this component available to the app
export default CusSlider;
